<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="单位" prop="unitId">
        <el-select v-model="queryParams.unitId" placeholder="请输入单位" :clearable="true" />
      </el-form-item>
      <el-form-item label="签订日期" prop="signingDate">
        <el-date-picker
          v-model="queryParams.signingDate"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="到期日期" prop="expireDate">
        <el-date-picker
          v-model="queryParams.expireDate"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['files:housingAgreement:query']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['files:housingAgreement:create']" @click="handleClickCreate">
          <Icon icon="ep:plus" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="HousingAgreement"
      height-per="90"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
    >
      <template #fileUrl="{ row }">
        <el-button v-if="row.fileUrl != ''" @click="handleClickFileUrl(row)">下载</el-button>
      </template>
      <template #menu="{ row }">
        <context-menu-item
          label="修改"
          @click="handleMenuUpdate(row)"
          v-hasPermi="['files:housingAgreement:update']"
        />
      </template>
    </Table>
  </ContentWrap>
  <HousingAgreementEdit ref="editForm" @success="getPage"
/></template>
<script setup name="HousingAgreement" lang="ts">
import * as HousingAgreementApi from '@/api/files/housingAgreement'
import HousingAgreementEdit from './HousingAgreementEdit.vue'
import { downloadByUrl } from '@/utils/filt'
const editForm = ref()
const queryFormRef = ref()
const queryParams = ref({
  unitId: undefined,
  signingDate: undefined,
  expireDate: undefined
})
const queryData = ref()
const columns = [
  {
    label: '单位',
    prop: 'unit.name'
  },
  {
    label: '签订日期',
    prop: 'signingDate'
  },
  {
    label: '到期日期',
    prop: 'expireDate'
  },
  {
    label: '面积',
    prop: 'area'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '附件',
    prop: 'fileUrl',
    slot: 'fileUrl'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  },
  {
    label: '更新时间',
    prop: 'updateTime'
  }
]
/** 初始化 */
onMounted(async () => {
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新增按钮操作 */
const handleClickCreate = () => {
  editForm.value.open('create', 0)
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await HousingAgreementApi.pageQuery(queryParams.value)
}

/** 处理table行双击事件 */
const handleTableDblclick = (row) => {
  editForm.value.open('update', row.id)
}

/** 处理右击事件 修改 */
const handleMenuUpdate = (row) => {
  editForm.value.open('update', row.id)
}

const handleClickFileUrl = (row) => {
  downloadByUrl({ url: row.fileUrl, fileName: row.fileName })
}
</script>
